<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>修德抄经堂</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/full.css">
    <style>
        .aaa {
            width: 500px;
            height: 500px;
            background: #000000;
        }

        span {
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div class="page">
        <!--<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>
	      	<h1 class="mui-title">确认交易</h1>
	    </header>-->
        <div class="content" style="padding-top: 50px;">
            <div style="width: 100%;height: 100px; text-align: center; color: #FFFFFF;">
                <span style="font-size: 26px; margin-top: 30px; display: inline-block;" id="price"></span>
            </div>
            <div style="text-align: center; width: 100%; margin-top: 30px;">
                <a id="confirmPay" href="javascript:void(0);">
	    			<button type="button" class="mui-btn mui-btn-success" style="width: 70%;">确认支付</button>
	    		</a>
            </div>
        </div>
    </div>
</body>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/resLoader.js"></script>
<script src="../bower_components/mui/dist/js/mui.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>
    $(function() {
        function parseURL(url) {
            if (url.split('?').length < 2) return null;
            var search = url.split('?')[1].toString();
            var para = search.split('&');
            var res = {};
            var arr = [];
            for (var i = 0, len = para.length; i < len; i++) {
                arr = para[i].split('=');
                res[arr[0]] = arr[1];
            }
            return res;
        }
        var parm = parseURL(window.location.href) || {};
        $('#price').text(parm.price);

        function getCookie(name) {
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) return unescape(arr[2]);
            return null;
        }

        var csrftoken = getCookie('csrftoken');
        var versionId = localStorage.getItem('versionId');
        var msg1 = localStorage.getItem('message');
        var msg2 = JSON.parse(msg1);



        $("#confirmPay").click(function() {

            //			if(parm&&parm.reurl){
            //				var reurl='./'+decodeURIComponent(parm.reurl);
            //				window.location.href=reurl||'./yuanwen.html';
            //			}else{
            //				window.location.href='./yuanwen.html';
            //			}

            var configData, payData, totalPrice;
            // 获取当前URL，并除去#内容
            var currentUrl = window.location.href.split('#')[0];

            $.when(

                // 获取config数据
                $.ajax({
                    url: '/fe/user/js_sign',
                    type: 'POST',
                    beforeSend: function(xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    },
                    data: {
                        "url": currentUrl,
                    },
                    success: function(data) {
                        configData = data.data;
                    },
                    error: function(xhr, status, error){
                            if (xhr.status == 403 ){
                                $.ajax({
                                    url: '/fe/user/login',
                                    success: function (data) {
                                        console.log(data);
                                        location.href = data.url;
                                    },
                                    error: function (error) {
                                        console.log('no');
                                        console.log(error);
                                    }
                                });

                            }
                        }
                }),

                // 提交订单，获取支付数据
                $.ajax({
                    url: '/fe/transcript/sutra_edition/' + versionId + '/orders',
                    type: 'POST',
                    beforeSend: function(xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    },
                    data: {
                        "typeset_id": msg2.typesetId,
                        "material_id": msg2.materialId,
                        "bind_id": msg2.bindId,
                        "font_color_id": msg2.colorId,
                    },
                    success: function(data) {
                        // 从响应中获取用户抄写ID
                        console.log(data.data)
                        var userTranscriptionID = data.data.user_transcription_id;
                        console.log(userTranscriptionID)
                        // 写入localStorage
                        localStorage.setItem("userTranscriptionID", userTranscriptionID);

                        totalPrice = data.data.total_price;
                        // // 如果免费则直接进入抄写流程
                        // if (data.data.total_price == 0){
                        //     location.href = "yuanwen.html";
                        // }
                        payData = data.data.wx_data;
                    }
                })

            ).then(function() {
                if (totalPrice == 0){
                    location.href = "yuanwen.html";
                }

                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

                    appId: configData.appid,
                    timestamp: configData.timestamp,
                    nonceStr: configData.noncestr,
                    signature: configData.sign,

                    jsApiList: ['chooseWXPay']
                });

                wx.chooseWXPay({
                    timestamp: payData.timeStamp,
                    nonceStr: payData.nonceStr,
                    package: payData.package,
                    signType: payData.signType,
                    paySign: payData.paySign,

                    success: function(res) {
                        // 支付成功后的回调函数
                        location.href = "yuanwen.html";
                    }
                });
            });
            });
        });
</script>

</html>
